<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dataForm.id ? '重置密码' : '注册用户'"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      ref="dataFormRef"
      style="max-width: 600px"
      :model="dataForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="dataForm.username" :disabled="!!dataForm.id"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="dataForm.password" type="password" autocomplete="off" show-password />
      </el-form-item>
      <el-form-item label="确定密码" prop="password2">
        <el-input v-model="dataForm.password2" type="password" autocomplete="off" show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose(false)">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { createApi, listApi, delApi } from '@/api/user/index.api'
  import useToggle from "@/hooks/useToggle";

  const emit = defineEmits(["refresh"]);

  const [dialogVisible, _, setDialogVisible] = useToggle()
  
  const dataForm = ref({
    id: void undefined,
    username: '',
    password: '',
    password2: '',
    role: 'user',
  })
  const dataFormRef = ref(null)
  const handleReset = () => {
    dataForm.value.id = void undefined
    dataFormRef.value.resetFields()
  }

  const handleClose = () => setDialogVisible(false)
  const handleOpen = (e) => {
    setDialogVisible(true)
    handleReset()

    nextTick(() => {
      if(e && e.id) {
        dataForm.value.id = e.id
        dataForm.value.username = e.username
        dataForm.value.role = e.role
      }
    })

  }


  const validatePassword2 = (rule, value, callback) => {
    if (!value) {
      callback(new Error('请再次输入密码'))
    } else if (value != dataForm.value.password) {
      callback(new Error('两次密码不一致'))
    } else {
      callback()
    }
  }
  const rules = ref({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码至少六位', trigger: 'blur' },
    ],
    password2: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      { validator: validatePassword2, trigger: 'blur' }
    ]
  })

  const submit = () => {
    dataFormRef.value.validate((valid) => {
      if (valid) {
        createApi({
          id: dataForm.value.id,
          username: dataForm.value.username,
          password: dataForm.value.password,
          role: dataForm.value.role,
        }).then(res => {
          emit("refresh");
          ElMessage({
            message: '注册成功',
            type: 'success',
          })
          handleClose()
        })
      } else {
        console.log('error submit!')
      }
    })
  }

  defineExpose({
    handleOpen,
  })
</script>
